<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户信息列表</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0
}

body {
	width: 90%;
	font-size: 14px;
	font-family: Microsoft Yahei;
	padding: 40px;
	font-family: 华文楷体
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border: 1px solid #ccc;
}

table th {
	background-color: #f1f1f1;
}

table th, table td {
	border: 1px solid #ccc;
	color: #555;
	padding: 5px 10px;
}

input {
	border: 1px solid #eee;
	padding: 3px 6px;
	color: #666;
}

form {
	height: 50px;
}

.topbar {
	height: 60px;
	padding: 0;
}

.topbar li {
	float: left;
	padding-right: 20px;
	list-style: none;
}

ul {
	list-style: none
}

nav ul  li {
	min-width: 100px;
	min-height: 50px;
	float: left
}

header {
	background-color: #f1f1f1;
	min-height: 70px;
	width: 100%;
	line-height: 70px
}

header ul  li {
	min-width: 100px;
	min-height: 50px;
	float: left;
}

footer ul li {
	min-width: 100px;
	min-height: 50px;
	float: left
}

a {
	text-decoration: none;
}

a:visited {
	color: black
}

aside {
	width: 200px;
	min-height: 500px;
	background-color: #f1f1f1;
	over-flow: auto;
	float: left;
}

section {
	float: left;
	width: 800px;
	min-height: 500px;
}

section  iframe {
	width: 100%;
	height: 600px;
	border: none;
}
.hint_color{
	color:red;
}


</style>

<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"
	src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>



</head>
<body>
	<h2>简易版蓝桥商城</h2>
	<br />
	<h3>商品列表</h3>
	<h3 style="text-align:right"><a href="cars.html">前往购物车</a></h3>
	<br />


	<div id="app">
		<table border="1">
			<tr>
				
				<th>编号</th>
				<th>名称</th>
				<th>价格</th>
				<th>类型</th>
				<th>库存</th>
				<th>图片</th>
		
				<th></th>
			

			</tr>
			<tr v-for="product  in lists ">
				
				<td>{{product.id}}</td>
				<td>{{product.name}}</td>
				<td>{{product.price}}</td>
				<td>{{product.type}}</td>
				<td>{{product.capacity}}</td>
				<td >
						<img alt="" v-bind:src="product.image" style="width:80px;height:50px">
				
				</td>


			
				<td>
						<button type="button" v-on:click="join(product.id)" style="border:none;cursor: pointer;">加入购物车</button>
				</td>
				
			</tr>
		</table>
	
		

	</div>


</body>

<script type="text/javascript">
	//Hint表示提示对象 ，把提示信息封装到hint对象中
	var vue = new Vue({
		el : '#app',
		data : {
			lists : []
		
		
			
		},
		methods : {
			init : function() {
				var _self = this;
				//自定义 一个函数 ，用来查询所有的商品信息，返回Json
				$.get("/Tust-lanqiao-demo/product/list", function(data) {
					_self.lists = data;
				}, "json");
			},
			join:function(v_id){
				//加入购物车功能 
				$.post("/Tust-lanqiao-demo/product/join",{id:v_id},function(data){
					alert(data.info);
				},"json");
				
			}

		}

	});
	//初始化Vue对象完毕之后，就调用init方法 （一进入页面，就显示数据）
	vue.init();
</script>







</html>